<template>
  <div class="min-h-screen bg-pink-gradient flex items-center justify-center p-4 relative overflow-hidden">
    <!-- 背景动画元素 -->
    <div class="animated-bg">
      <!-- 漂浮的心形 -->
      <div v-for="i in 15" :key="`heart-${i}`" class="heart" :style="getHeartStyle(i)">❤️</div>
      <!-- 粉色气泡 -->
      <div v-for="i in 20" :key="`bubble-${i}`" class="bubble" :style="getBubbleStyle(i)"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="glass-effect rounded-3xl shadow-pink-xl p-8 w-full max-w-md relative z-10">
      <!-- 标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-pink-600 mb-2">我们的小窝 💕</h1>
        <p class="text-pink-400">记录每一个甜蜜瞬间</p>
      </div>

      <!-- 登录表单 -->
      <n-form ref="formRef" :model="formData" :rules="rules" size="large">
        <n-form-item path="username" :show-label="false">
          <n-input
            v-model:value="formData.username"
            placeholder="请输入用户名"
            class="input-pink"
            clearable
          >
            <template #prefix>
              <span class="text-pink-400">👤</span>
            </template>
          </n-input>
        </n-form-item>

        <n-form-item path="password" :show-label="false">
          <n-input
            v-model:value="formData.password"
            type="password"
            placeholder="请输入密码"
            class="input-pink"
            show-password-on="click"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <span class="text-pink-400">🔒</span>
            </template>
          </n-input>
        </n-form-item>

        <n-button
          type="primary"
          block
          size="large"
          :loading="loading"
          @click="handleLogin"
          class="btn-pink mt-4"
        >
          {{ loading ? '登录中...' : '进入我们的小窝' }}
        </n-button>
      </n-form>

      <!-- 底部装饰 -->
      <div class="text-center mt-6 text-pink-300 text-sm">
        <p>愿每一天都充满爱与温暖 🌸</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const message = useMessage()
const authStore = useAuthStore()

const formRef = ref<FormInst | null>(null)
const loading = ref(false)

// 表单数据
const formData = ref({
  username: '',
  password: '',
})

// 表单验证规则
const rules: FormRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, message: '密码至少3个字符', trigger: 'blur' },
  ],
}

// 登录处理
const handleLogin = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    loading.value = true

    await authStore.login(formData.value)
    message.success('登录成功！欢迎回来 💖')

    // 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      router.push({ name: 'dashboard' })
    }, 500)
  } catch (error: any) {
    if (error?.errors) {
      // 表单验证失败
      return
    }
    message.error(error?.message || '登录失败，请检查用户名和密码')
  } finally {
    loading.value = false
  }
}

// 生成心形动画样式
const getHeartStyle = (index: number) => {
  const size = Math.random() * 20 + 15
  const left = Math.random() * 100
  const duration = Math.random() * 6 + 6
  const delay = Math.random() * 5

  return {
    left: `${left}%`,
    fontSize: `${size}px`,
    animationDuration: `${duration}s`,
    animationDelay: `${delay}s`,
  }
}

// 生成气泡动画样式
const getBubbleStyle = (index: number) => {
  const size = Math.random() * 60 + 20
  const left = Math.random() * 100
  const duration = Math.random() * 8 + 8
  const delay = Math.random() * 5

  return {
    left: `${left}%`,
    width: `${size}px`,
    height: `${size}px`,
    animationDuration: `${duration}s`,
    animationDelay: `${delay}s`,
  }
}
</script>

<style scoped>
/* 背景动画容器 */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* 漂浮心形 */
.heart {
  position: absolute;
  bottom: -50px;
  animation: floatUp linear infinite;
  opacity: 0.6;
  filter: drop-shadow(0 0 10px rgba(255, 182, 193, 0.5));
}

@keyframes floatUp {
  0% {
    bottom: -50px;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    bottom: 110%;
    transform: translateX(calc(var(--random-x, 0) * 100px)) rotate(360deg);
    opacity: 0;
  }
}

/* 粉色气泡 */
.bubble {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 192, 203, 0.8), rgba(255, 182, 193, 0.3));
  animation: bubbleRise linear infinite;
  opacity: 0.5;
  box-shadow: 0 0 20px rgba(255, 182, 193, 0.3);
}

@keyframes bubbleRise {
  0% {
    bottom: -100px;
    transform: translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    bottom: 110%;
    transform: translateX(calc((var(--random-x, 0) - 0.5) * 200px)) scale(1.2);
    opacity: 0;
  }
}

/* Naive UI 输入框样式覆盖 */
:deep(.n-input) {
  border-radius: 0.75rem;
  border: 2px solid #ffc9de;
}

:deep(.n-input:hover) {
  border-color: #ff8dc7;
}

:deep(.n-input.n-input--focus) {
  border-color: #ff6bb5;
  box-shadow: 0 0 0 3px rgba(255, 107, 181, 0.1);
}

:deep(.n-input__input-el) {
  padding: 0.75rem 1rem;
}

/* Naive UI 按钮样式覆盖 */
:deep(.n-button.n-button--primary-type) {
  background: linear-gradient(to right, #ff8dc7, #ff6bb5);
  border: none;
  border-radius: 1rem;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
  box-shadow:
    0 4px 6px -1px rgba(255, 107, 181, 0.1),
    0 2px 4px -1px rgba(255, 107, 181, 0.06);
  transition: all 0.3s;
}

:deep(.n-button.n-button--primary-type:hover) {
  box-shadow:
    0 10px 15px -3px rgba(255, 107, 181, 0.1),
    0 4px 6px -2px rgba(255, 107, 181, 0.05);
  transform: scale(1.02);
}

:deep(.n-button.n-button--primary-type:active) {
  transform: scale(0.98);
}
</style>
